import { resourceDelete, resourceManageList } from "@/services/chargingManage";
import { Button, Card, DatePicker, Form, Input, message, Modal, Table } from "antd";
import moment from "moment";
import React from "react";
import { formatMessage } from "umi-plugin-react/locale";
import testData from "./testData";
import CustomResourceModal from "./customResourceModal";
import PriceResourceModal from "../resourcePricing/priceResourceModal";

class ResourceManage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      loading: false,
      expandedRowKeys: [],
    };
  }

  componentDidMount() {
    this.getList();
  }

  getList = () => {
    this.setState(
      {
        loading: true,
      },
      async () => {
        const info = this.props.form.getFieldsValue();
        let obj = {
          search: info.search,
          startDate: info.time && info.time[0] ? moment(info.time[0]).format("YYYY-MM-DD") : null,
          endDate: info.time && info.time[1] ? moment(info.time[1]).format("YYYY-MM-DD") : null,
        };
        let expandedRowKeys = [];
        const res = await resourceManageList(obj);
        for (let i = 0; i < 8; i++) {
          if (res[i]) {
            res[i].id = i;
            expandedRowKeys.push(i);
          }
        }

        this.setState({
          list: res,
          loading: false,
          expandedRowKeys,
        });
      }
    );
  };

  openModal = (row) => {
    if (this.props.pageType == "resourceManage") {
      this.CustomResourceModal.initModal(row);
    } else {
      this.PriceResourceModal.initModal(row);
    }
  };

  removeConfirm = (id) => {
    Modal.confirm({
      title: formatMessage({ id: "chargingManage.resourceManage.resourceList.confirmDelete" }),
      okText: formatMessage({ id: "chargingManage.resourceManage.resourceList.confirm" }),
      cancelText: formatMessage({ id: "chargingManage.resourceManage.resourceList.cancel" }),
      okType: "danger",
      onOk: () => {
        this.doRemove(id);
      },
    });
  };

  doRemove = async (id) => {
    const res = await resourceDelete({ id });
    if (res.code === -1) {
      return false;
    }
    message.info(res.message);
    this.getList();
  };

  render() {
    const { list, loading, expandedRowKeys } = this.state;
    const {
      form: { getFieldDecorator },
      pageType,
    } = this.props;
    const columns = [
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.resourceType" }),
        dataIndex: "name",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.resourceName" }),
        dataIndex: "resourceName",
        width: 200,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.resourceCode" }),
        dataIndex: "resourceCode",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.resourceXing" }),
        dataIndex: "resourceXing",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.resourceXian" }),
        dataIndex: "resourceXian",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.resourceClass" }),
        dataIndex: "resourceClass",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.resourceUnit" }),
        dataIndex: "resourceUnit",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.resourceSource" }),
        dataIndex: "resourceSource",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.supplier" }),
        dataIndex: "resourceSupplier",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.lowerLimit" }),
        dataIndex: "resourceLl",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.upperLimit" }),
        dataIndex: "resourceUl",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.reminderThreshold" }),
        dataIndex: "reminderThreshold",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.disableThreshold" }),
        dataIndex: "disableThreshold",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.toleranceCoefficient" }),
        dataIndex: "toleranceCoefficient",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.activationDate" }),
        dataIndex: "activationDate",
        width: 150,
        render: (time) => {
          return time ? moment(time).format("YYYY-MM-DD") : "";
        },
      },
      {
        title: formatMessage({ id: "chargingManage.resourceManage.resourceList.disableDate" }),
        dataIndex: "disableDate",
        width: 150,
        render: (time) => {
          return time ? moment(time).format("YYYY-MM-DD") : "";
        },
      },
    ];

    if (pageType === "resourcePricing") {
      columns.push(
        {
          title: formatMessage({ id: "chargingManage.resourceManage.resourceList.standardPrice" }),
          dataIndex: "standardPrice",
          width: 100,
          fixed: "right",
        },
        {
          title: formatMessage({ id: "chargingManage.resourceManage.resourceList.overflowPrice" }),
          dataIndex: "overflowPrice",
          width: 100,
          fixed: "right",
        }
      );
    }

    columns.push({
      title: formatMessage({ id: "chargingManage.resourceManage.resourceList.operation" }),
      width: pageType === "resourcePricing" ? 100 : 170,
      fixed: "right",
      render: (text, row) => {
        return row.resourceName === "" || row.resourceName == null || row.resourceName == undefined ? (
          ""
        ) : (
          <span>
            <Button size="small" onClick={() => this.openModal(row)} type="primary">
              {formatMessage({ id: "chargingManage.resourceManage.resourceList.edit" })}
            </Button>
            {pageType != "resourcePricing" && row.resourceType == 16 ? (
              <Button type="danger" size="small" onClick={() => this.removeConfirm(row.id)} style={{ marginLeft: 8 }}>
                {formatMessage({ id: "chargingManage.resourceManage.resourceList.delete" })}
              </Button>
            ) : (
              ""
            )}
          </span>
        );
      },
    });

    return (
      <Card bordered={false} style={{ minHeight: "100%" }}>
        <div className="topOptionBox">
          <Form layout="inline">
            <Form.Item>
              {getFieldDecorator("search")(
                <Input.Search
                  placeholder={formatMessage({ id: "chargingManage.resourceManage.resourceList.searchResourceName" })}
                  onSearch={this.getList}
                />
              )}
            </Form.Item>
            <Form.Item>{getFieldDecorator("time")(<DatePicker.RangePicker onChange={this.getList} />)}</Form.Item>
          </Form>
          {pageType == "resourceManage" ? (
            <Button type="primary" onClick={() => this.openModal()}>
              {formatMessage({ id: "chargingManage.resourceManage.resourceList.newCustomResource" })}
            </Button>
          ) : (
            ""
          )}
        </div>

        <Table
          columns={columns}
          dataSource={list}
          loading={loading}
          pagination={false}
          rowKey={"id"}
          scroll={{ x: "auto", y: "calc(100vh - 260px)" }}
          expandedRowKeys={expandedRowKeys}
          onExpandedRowsChange={(expandedRowKeys) => this.setState({ expandedRowKeys })}
        />

        <CustomResourceModal onRef={(ref) => (this.CustomResourceModal = ref)} refreshList={this.getList} columns={columns} />

        <PriceResourceModal onRef={(ref) => (this.PriceResourceModal = ref)} refreshList={this.getList} />
      </Card>
    );
  }
}

export default Form.create()(ResourceManage);
